<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/resource/common/taglib.jspf"%>
<%@include file="/resource/common/commonJs.jspf"%>
<%@include file="/resource/common/commonCss.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>${SESSION_COMPANY}-用户受权</title>
<link rel="stylesheet" href="resource/plugins/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="${ctx}/resource/css/msgTips.css" type="text/css" media="screen" />
<script type="text/javascript" src="${ctx}/resource/js/msgTips.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery/jquery.showLoading.min.js"></script>
<link rel="stylesheet" href="${ctx }/resource/js/jquery/showLoading.css" type="text/css" media="screen" />
<style type="text/css">

#user-title-box {
	width: auto;
	height: 30px;
	overflow: hidden;
	padding: 0 10px;
	border-bottom: 1px solid #e2e2e2;
	text-align: center;
}

#user-title-box span {
	color: #FF0000;
	margin: 0 5px;
}

#user-authority-box {
	width: auto;
	height: auto;
	overflow: hidden;
}

#user-authority-left-box {
	float: left;
	width: auto;
	min-width: 160px;
	height: 520px;
	overflow: hidden;
	margin-right: 20px;
	border-right: 1px solid #e2e2e2;
}

#user-authority-right-box {
	float: left;
	width: auto;
	overflow: hidden;
	height: auto;
}

#user-authority-right-box #moduleList {
	padding: 10px 0 10px 0;
}

#moduleSave {
	width: auto;
	height: auto;
	overflow: hidden;
	padding: 10px 0 10px 0;
	display: none;
	clear: both;
}

dl {
	font-family: "Microsoft YaHei";
	display: block;
	padding: 0;
	margin: 3px 0;
	height: 24px;
	line-height: 24px;
	clear: both;
}

dl dt {
	float: left;
	background-color: #666600;
	color: #FFF;
	padding: 0 10px;
}

dl dd {
	float: left;
	word-break: keep-all;
	overflow: hidden;
	padding: 0px 10px;
}

dl dd label {
	display: inline-block;
	font-weight: normal;
}

select {
	border-radius: 4px;
	border: 1px solid #ccc;
	font-family: inherit;
	font-size: 12px;
	height: 26px;
	line-height: 26px;
}

#role-authority-box {
	margin-top: 10px;
	padding-bottom: 30px;
}

#role-authority-left-box {
	float: left;
	width: 305px;
	height: auto;
	border: 1px solid #e2e2e2;
}

#role-authority-left-box div {
	width: auto;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

#role-authority-left-box select {
	padding: 10px;
	margin: 10px;
	width: 280px;
	height: 380px;
}

#role-authority-center-box {
	float: left;
	width: auto;
	height: auto;
	padding: 50px 30px;
	text-align: center;
}

#role-authority-center-box input {
	margin: 10px 0;
	width: 60px;
	height: 26px;
}

#role-authority-right-box {
	float: left;
	width: 305px;
	height: auto;
	border: 1px solid #e2e2e2;
}

#role-authority-right-box div {
	width: auto;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

#role-authority-right-box select {
	padding: 10px;
	margin: 10px;
	width: 280px;
	height: 380px;
}

.label_on {
	border: 2px solid red;
}
-->
</style>
<script type="text/javascript">
	var PATH = "${ctx}";

	$(function() {
		$("body").showLoading();
		$("#add").click(function() {
			if ($("#allRole option:selected").length > 0) {
				$("#allRole option:selected").each(function() {
					$("#haveRole").append("<option value='" + $(this).val()+ "'>" + $(this).text()+ "</option");
							$(this).remove();
					});
			} else {
				alert("请选择要添加的角色！");
			}
		});
		$("#cut").click(function() {
			if ($("#haveRole option:selected").length > 0) {
				$("#haveRole option:selected").each(function() {
					$("#allRole").append("<option value='" + $(this).val()+ "'>" + $(this).text()+ "</option");
						$(this).remove();
					});
			} else {
				alert("请选择要删除的角色！");
			}
		});
		initUserRole();
	});

	//初始化用户的角色
	function initUserRole() {
		var uid = $("#uid").val();
		$.ajax({
			async : true, // 是否异步
			type : 'Post',
			url : 'userRoleAjaxList.do',
			data : 'id=' + uid,
			dataType : 'json',
			success : function(data) {
				if (data.ret == 1) {
					$.each(data.data, function(i, item) {
						var rid = item.rid;
						var name = item.name;

						$("#allRole option[value='" + rid + "']").remove();

						var html = "<option value="+rid+">" + name
								+ "</option>";
						$("#haveRole").append(html);
					});
				}
				$("body").hideLoading();
			}
		});
	}

	//保存用户所拥有的角色
	function SaveUserRole() {
		var uid = $("#uid").val();
		var haveRoleList = new Array();
		$("#haveRole option").each(function() {
			haveRoleList.push($(this).val());
		});

		var roles = haveRoleList.join(",");

		$.ajax({
			async : true, // 是否异步
			type : 'Post',
			url : 'saveSysUserRole.do',
			data : 'uid=' + uid + "&roles=" + roles,
			dataType : 'json',
			success : function(data) {
				if (data.ret == 1) {
					top.layer.msg('用户角色设置成功.......', {
						time : 1000,
						icon : 6
					});
				} else {
					top.layer.alert('用户角色设置失败....' + data.msg, {
						skin : 'layui-layer-lan',
						closeBtn : 0,
						anim : 4,
						icon : 5
					});
				}
			}
		});
	}

</script>
</head>
<body>

	<div id="body-wrapper">
		<div id="main-content">
			<div class="clear"></div>
			<div class="content-box">
				<div class="content-box-header">
					<h3 class="panel-title">用户受权</h3>
					<ul class="content-box-tabs">
						<a href="javascript:history.go(-1);" class="btn btn-default" style="padding-bottom: 0px;padding-top: 0px;line-height: 25px;margin-top: -5px;">返回</a>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="content-box-content">
					<input type="hidden" id="uid" name="uid" value="${user.uid}" />
					<div id="user-title-box">
						给<span>${user.username}</span>授权
					</div>
					<div id="user-authority-box">
						<div id="role-authority-box">
							<div class="row">
								<div class="col-md-3" >
								</div>
								<div class="col-md-6" >
									<div id="role-authority-left-box">
										<div>角色列表</div>
										<select id="allRole" name="allRole" multiple="multiple">
											<c:forEach var="rolelist" items="${rolelist}" varStatus="abc">
												<option value="${rolelist.rid}">${rolelist.name}</option>
											</c:forEach>
										</select>
									</div>
									<div id="role-authority-center-box">
										<shiro:hasPermission name="SysUser:SYS_GRANT">
											<input type="button" id="add" value="&gt;&gt;" /> <br /> 
											<input type="button" id="cut" value="&lt;&lt;" /> <br /> 
											
										</shiro:hasPermission>
									</div>
									<div id="role-authority-right-box">
										<div>用户角色</div>
										<select id="haveRole" name="haveRole" multiple="multiple"></select>
									</div>
								</div>
								<div class="col-md-3" >
								</div>
							</div>
							<div class="row"><label class="col-sm-1 control-label"> </label></div>
							<div class="row">
								<div class="col-md-12" >
									<div class="form-group">
											<div class="col-sm-3">
											</div>
											<div class="col-sm-6">
												<input type="button" id="save" value="保存" class="btn btn-primary " style="width: 85%; height: 35px;cursor: pointer" onclick="SaveUserRole()" />
											</div>
											<div class="col-sm-3">
											</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			
		</div>
	</div>
</body>
</html>
